<!--领航宣讲人才库-->
<template>
  <div class="talentPool">
    <div class="talentPool-container">
      <div class="talentPool-message">
        <!--人才列表-->
        <div class="message-list" v-for="(item, index) in talentList" :key="index" @click="talentDetails(item)">
          <div class="message-avatar">
            <el-avatar :src="item.avatarUrl" fit="cover" />
          </div>
          <div class="message-name">姓名：{{ item.userName }}</div>
          <div class="message-job">职务：{{ item.partyBranchPosition }}</div>
        </div>
        <!-- 如果人才列表和返回数据相等 则不需要查看更多按钮 -->
        <div class="see-more" @click="seeMore" v-if="total !== talentList.length">
          <div class="see-more-text">查看更多</div><el-icon><ArrowDown /></el-icon>
        </div>
      </div>
      <!--搜索区域-->
      <div class="talentPool-search">
        <!--搜索框-->
        <div class="search-input">
          <el-input clearable v-model="search.queryText" placeholder="请输入关键字查询" @blur="getPreachList">
            <template #append><el-button @click="getPreachList">搜索</el-button></template>
          </el-input>
        </div>
        <!--标签-->
        <div class="search-tag">
          <div class="tag-title">标签</div>
          <div class="tag-content-list">
            <div class="tag-list" v-for="(item, index) in gradeLabelList" :key="index">
              <span class="tag-content" @click="tagSearch(item)">{{ item }}</span>
            </div>
          </div>
        </div>
        <!--公司标签-->
        <div class="search-tag">
          <div class="tag-title">公司</div>
          <div class="tag-content-list">
            <div class="tag-list" v-for="(item, index) in companyLabelList" :key="index">
              <span class="tag-content" @click="tagSearch(item)">{{ item }}</span>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!--人才列表详情弹窗-->
    <el-dialog title="人员信息" v-model="dialogVisible" width="45%" :close-on-click-modal="false" center>
      <div class="dialog-content">
        <el-form ref="ruleFormRef" :model="personnelInformation" label-position="left" label-width="90">
          <div class="dialog-title">人员基础信息</div>
          <div class="dialog-message">
            <div class="dialog-avatar">
              <!-- 上传头像 -->
              <el-avatar class="personage-avatar" fit="cover" :src="personnelInformation.avatarUrl" shape="square" />
            </div>
            <!--个人信息-->
            <div class="dialog-intro">
              <el-form-item label="姓名：" prop="userName">
                <div class="intro-show">{{ personnelInformation.userName }}</div>
              </el-form-item>
              <el-form-item label="支部：" prop="partyOrgName">
                <div class="intro-show">{{ personnelInformation.partyOrgName }}</div>
              </el-form-item>
              <el-form-item label="公司：" prop="companyName">
                <div class="intro-show">{{ personnelInformation.companyName }}</div>
              </el-form-item>
              <el-form-item label="个人简介：" prop="briefIntroduction">
                <div class="intro-show">{{ personnelInformation.briefIntroduction }}</div>
              </el-form-item>
            </div>
          </div>
          <div class="dialog-title">宣讲经验</div>
          <!--这里不展示label 所以label-width为0-->
          <el-form-item prop="lectureExperience" label-width="0">
            <div class="intro-show" style="padding: 0 20px">{{ personnelInformation.lectureExperience }}</div>
          </el-form-item>
        </el-form>
      </div>
    </el-dialog>
  </div>
</template>

<script setup>
import { attachmentEcho, preachShow, getDetail } from "@/api/navigationLecture";
import { onMounted, reactive, ref } from "vue";
import { ElMessage } from "element-plus";
import Conf from "@/utils/conf";

const { proxy } = getCurrentInstance();
const preachId = ref("talentPool");
const talentList = ref([]); // 人才列表
const gradeLabelList = ref(["高级", "中级"]); // 等级标签列表
const companyLabelList = ref([
  "省公司",
  "杭州分公司",
  "宁波分公司",
  "温州分公司",
  "金华分公司",
  "台州分公司",
  "绍兴分公司",
  "嘉兴分公司",
  "湖州分公司",
  "丽水分公司",
  "舟山分公司",
  "衢州分公司",
]); // 公司标签列表
const dialogVisible = ref(false); // 个人信息弹窗状态
const personnelInformation = ref({}); // 个人信息弹窗数据
const total = ref(0); // 总条数
const data = reactive({
  //基本信息表单
  search: {
    pageNum: 1,
    pageSize: 12,
    queryText: "", // 人才搜索
  },
});
const { search } = toRefs(data); // 搜索表单

onMounted(() => {
  getPreachList();
});

/**
 * 获取人才列表
 */
const getPreachList = async () => {
  try {
    proxy.$modal.loading("请稍后...");
    const {
      data: { list },
      total: totalValue,
    } = await preachShow(preachId.value, search.value);
    talentList.value = list;
    total.value = totalValue;
    headPortraitShow(list);
  } catch (error) {
    ElMessage.error(error);
  } finally {
    proxy.$modal.closeLoading();
  }
};
/**
 * 查看更多
 */
const seeMore = () => {
  // 每次点击查看更多 添加12条数据
  search.value.pageSize = search.value.pageSize + 12;
  getPreachList();
};
/**
 * 头像展示
 * @param data 人才列表
 */
const headPortraitShow = async (data) => {
  try {
    for (const [index, value] of data.entries()) {
      // 如果没有图片id 则使用员工默认头像
      if(!value.pictureId) {
        talentList.value[index].avatarUrl = Conf.VITE_DEFAULT_AVATAR_URL + value.userId;
      } else {
        // 根据图片id 获取图片
        const response = await attachmentEcho({ id: value.pictureId });
        const blob = new Blob([response], { type: "text/plain;charset=utf-8" });
        // 创建一个指向该 Blob 对象的URL 赋值给人才列表进行展示
        talentList.value[index].avatarUrl = window.URL.createObjectURL(blob);
      }
    }
  } catch (error) {
    ElMessage.error(error);
  } finally {
    proxy.$modal.closeLoading();
  }
};
/**
 * 人才详情
 * @param item 当前数据
 */
const talentDetails = async (item) => {
  try {
    proxy.$modal.loading("请稍后...");
    const { data } = await getDetail(preachId.value, { id: item.id });
    personnelInformation.value = { ...data, avatarUrl: item.avatarUrl }; // 获取到数据 赋值给弹出表单
    dialogVisible.value = true; // 打开弹窗
  } catch (error) {
    ElMessage.error(error);
  } finally {
    proxy.$modal.closeLoading();
  }
};
/**
 * 标签搜索
 * @param item 用户点击的当前标签
 */
const tagSearch = (item) => {
  search.value.queryText = item;
  getPreachList();
};
</script>

<style scoped lang="less">
// 弹窗
:deep(.el-dialog__title) {
  font-size: 20px;
  color: #333030;
  font-weight: 700;
}
:deep(.dialog-content) {
  padding: 10px 80px 30px;
  .el-form-item__label {
    font-size: 14px;
    font-weight: 500;
  }
  .dialog-title {
    font-size: 18px;
    font-weight: 700;
    color: #333030;
    margin-bottom: 20px;
  }
  .dialog-message {
    display: flex;
    justify-content: flex-start;
    margin: 20px 0 30px;
    padding: 0 20px;
    .dialog-avatar {
      margin-right: 50px;
      .el-avatar {
        //--el-avatar-size: 200px !important;
        border: 2px solid #dd1d19;
        width: 160px !important;
        height: 200px !important;
      }
    }
    .dialog-intro {
      padding-top: 10px;
      width: 60%;
      .intro-show {
        font-size: 14px;
        color: #333333;
        font-weight: 400;
      }
      // 人员选择输入框
      .personnel-input {
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        border: 1px solid #dddfe6;
        border-radius: 5px;
        padding: 0 10px;
        cursor: pointer;
        min-height: 35px;
        .input-personnelList {
          color: #a9abb2;
          font-size: 14px;
        }
      }
      .personnel-input-disabled {
        background-color: #f5f7fa;
        cursor: not-allowed;
      }
    }
  }
}
.talentPool {
  height: 650px;
  .talentPool-container {
    display: flex;
    justify-content: space-between;
    height: 100%;
  }
  // 信息列表区域
  .talentPool-message {
    width: 75%;
    display: flex;
    flex-wrap: wrap;
    align-content: flex-start;
    overflow-y: scroll;
    overflow-x: hidden;
    height: 100%;
    &::-webkit-scrollbar {
      width: 10px;
      height: 8px;
    }
    &::-webkit-scrollbar-thumb {
      background-color: #afafaf;
      border-radius: 6px;
    }
    .message-list {
      width: 240px;
      height: 210px;
      font-size: 14px;
      color: #333333;
      text-align: center;
      font-weight: 400;
      border-radius: 8px;
      background-color: #ffffff;
      padding: 0 25px;
      margin-right: calc((100% - 240px * 4) / 3);
      margin-bottom: 15px;
      cursor: pointer;
      &:hover {
        box-shadow: 0 0 12px rgba(0, 0, 0, 0.12);
        transition: 0.3s;
      }
      &:nth-child(4n) {
        margin-right: 0;
      }
      // 头像样式
      .message-avatar {
        margin: 20px 0 15px;
        :deep(.el-avatar) {
          border: 2px solid #dd1d19;
          --el-avatar-size: 80px !important;
        }
      }
      .message-name {
        margin-bottom: 8px;
      }
      .message-job {
        line-height: 20px;
        width: 100%;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        overflow: hidden;
        text-overflow: ellipsis;
        -webkit-line-clamp: 2; /* 控制显示的行数 */
      }
    }
    // 查看更多
    .see-more {
      font-size: 14px;
      color: #333333;
      cursor: pointer;
      display: flex;
      align-items: center;
      margin: auto;
      .see-more-text {
        margin-right: 5px;
      }
    }
  }
  // 搜索区域
  :deep(.talentPool-search) {
    width: 24%;
    height: 100%;
    background-color: #ffffff;
    border-radius: 8px;
    padding: 25px;
    // 搜索框
    .search-input {
      width: 100%;
      border: 1px solid #cccccc;
      border-radius: 22px;
      padding-left: 10px;
      .el-input__wrapper {
        height: 44px;
        background-color: transparent; /*覆盖原背景颜色，设置成透明 */
        border: 0;
        box-shadow: 0 0 0 0px;
      }
      .el-input-group__append {
        background: #dd1d19;
        border-radius: 22px;
        border: 0;
        box-shadow: 0 0 0 0px;
        margin: 3px;
        span {
          font-size: 14px;
          color: #ffffff;
          font-weight: 700;
        }
      }
    }
    // 标签
    .search-tag {
      margin: 80px 0;
      .tag-title {
        font-size: 14px;
        color: #666666;
        font-weight: 400;
        margin-bottom: 5px;
      }
      .tag-content-list {
        display: flex;
        flex-wrap: wrap;
        .tag-list {
          margin-bottom: 5px;
          .tag-content {
            background-color: #f5f5f5;
            text-align: center;
            font-size: 12px;
            color: #666666;
            line-height: 18px;
            font-weight: 400;
            padding: 4px 8px;
            margin-right: 8px;
            cursor: pointer;
            border-radius: 4px;
          }
        }
      }
    }
  }
}
</style>
